<template>
	<view class="box">
	<!-- 	<view class="tu flex">

			<view class="img1" @click="change()">
				<view class="jinx">
					<image src="/static/jin.png" mode=""></image>
				</view>
				<image src="/static/lu1.jpg" mode=""></image>
				<p>长征路线</p>
			</view> -->
			<!-- img1 -->
			<!-- <view class="img1"  @click="change()">
				<view class="jinx1">
					<image src="/static/jin.png" mode=""></image>
				</view>
				<image src="/static/lu2_02.png" mode=""></image>
				<p>重大会议路线</p>
			</view>

		</view> -->
		<!-- tu -->
	<!-- 	<view class="tu flex">
		
			<view class="img1 "  @click="change()">
				<view class="jinx">
					<image src="/static/jin.png" mode=""></image>
				</view>
				<image src="/static/lu1.jpg" mode=""></image>
				<p>长征路线</p>
			</view> -->
			<!-- img1 -->
		<!-- 	<view class="img1"  @click="change()">
				<view class="jinx1">
					<image src="/static/jin.png" mode=""></image>
				</view>
				<image src="/static/lu2_02.png" mode=""></image>
				<p>重大会议路线</p>
			</view>
		
		</view> -->
		<!-- tu -->
	<!-- 	<view class="tu flex">
			<view class="img1" @click="open()" >
				<image src="/static/lu1.jpg" mode=""></image>
				<p>路线5</p>
				<view class="yin1">
					<image src="/static/suo.png" mode=""></image>
				</view>
			</view> -->
			<!-- img1 -->
<!-- 			<view class="img1" @click="open()">
				<image src="/static/lu2_02.png" mode=""></image>
				<p>路线4</p>
				<view class="yin">
					<image src="/static/suo.png" mode=""></image>
				</view>
			</view>
		</view> -->
		<!-- tu -->
		<!-- <view class="tu flex">
			<view class="img1"  @click="open()">
				<image src="/static/lu1.jpg" mode=""></image>
				<p>路线5</p>
				<view class="yin1">
					<image src="/static/suo.png" mode=""></image>
				</view>
			</view> -->
			<!-- img1 -->
			<!-- <view class="img1"  @click="open()">
				<image src="/static/lu2_02.png" mode=""></image>
				<p>路线4</p>
				<view class="yin">
					<image src="/static/suo.png" mode=""></image>
				</view>
			</view>
		</view> -->
		<!-- tu -->
	<!-- 	<view class="tu flex">
			<view class="img1"  @click="open()">
				<image src="/static/lu1.jpg" mode=""></image>
				<p>路线5</p>
				<view class="yin1">
					<image src="/static/suo.png" mode=""></image>
				</view>
			</view> -->
			<!-- img1 -->
		<!-- 	<view class="img1 " @click="open()">
				<image src="/static/lu2_02.png" mode=""></image>
				<p>路线4</p>
				<view class="yin">
					<image src="/static/suo.png" mode=""></image>
				</view>
			</view>
		</view> -->
		<!-- <view class="adas" @click="click()" v-for="(item,index) in list" :key="index">
			<image :src="item.png" mode=""></image>
		</view> -->
		
		
		
		<view class="flex">
			<view class="tu" v-for="(item,index) in list1" :key="index">
			    <view class="img1 flex" @click="open()">
						<image :src="item.png" mode=""></image>
			    	<p>{{item.title}}</p>
						<view class="yin1">
							<image src="/static/suo.png" mode=""></image>
						</view>
			    </view>			
			</view>
		</view>
		
		
		
		
		
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				list1:[]
			}
		},
		onLoad() {
      this.click()
		},
		methods: {
		click: function() {
					var that=this
					uni.request({
						url: "http://180.76.120.179:8081/xiaochengxu/index/answer",
						data: "",
						success(res) {
							console.log(res.data.data)
							var datas = res.data.data
							that.list1=datas
						}
					})
				},
change:function(){
	uni.navigateTo({
		url:"/pages/answer/unlock"
	})
},
 open(){
				uni.showModal({
				    title: '提示',
				    content: '您的步数还未到达该地区,无法答题喔',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							uni.navigateTo({
								url: '/pages/answer/answer'  //点击要跳转的页面路径
							});
							
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			
		}
	}
</script>

<style>
	.box {
		position: relative;
	}

	.flex {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
.flex1{display: flex;justify-content: space-around;}
	.tu {
		width: 40%;
		margin: 1rem auto;
	}

	.img1 {
		width:100%;
		border: 1px solid #ccc;
		padding: 1rem;
		border-radius: 0.5rem;
		position: relative;
		
	}
  .img1 p{text-align: center;}
	.img1 image {
		width: 100%;
		height: 5rem;
		display: block;
		padding: 0 0 0.2rem 0;
	}

	.img1 p {
		text-align: center;
	}

	.yin {
		background-color: rgba(43, 52, 70, 0.3);
		position: absolute;
		z-index: 99;
		width: 100%;
		height: 100%;
		border-radius: 0.5rem;
		text-align: center;
		right: 0rem;
		top: 0;
	}

	.yin image {
		width: 55%;
		height: 50%;
				margin:0 auto;
		padding: 1rem 0;
	}

	.yin1 {
		background-color: rgba(43, 52, 70, 0.3);
		position: absolute;
		z-index: 99;
		width: 100%;
		height: 100%;
		border-radius: 0.5rem;
		text-align: center;
		left: 0rem;
		top: 0;
	}

	.yin1 image {
		width: 50%;
		height: 50%;
		margin:0 auto;
		padding: 1rem 0;
	}

	/* 红色的 */
	.jinx {
		width: 40%;
		height: 1.5rem;
		position: absolute;
		z-index: 99;
		left: 0rem;
		top:0;
	}

	.jinx image {
		width: 50%;
		height: 1.7rem;
		
		border-radius: 0.6rem;
	}

	.jinx1 {
		width: 20%;
		height: 1.5rem;
		position: absolute;
		z-index: 99;
		right: 5.5rem;
	}

	.jinx1 image {
		width: 50%;
		height: 1.7rem;
		border-radius: 0.6rem;
	}
</style>